<template>
  <NavBar title="个人信息" color="#fff" colorText="#333" brg="#f8f8f8">
  <view class="personal-info-container">

    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 个人信息卡片 -->
      <view class="info-card">
        <!-- 头像 -->
        <view class="info-item">
          <text class="item-label">头像</text>
          <view class="item-right">
            <!-- 微信小程序端使用button组件 -->
            <button
              v-if="isWeixinMP"
              class="avatar-wrapper"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              <image
                class="avatar"
                :src="displayAvatar"
                mode="aspectFill"
              ></image>
            </button>

            <!-- 非微信小程序端使用普通点击 -->
            <view v-if="!isWeixinMP" class="avatar-container" @click="changeAvatar">
              <image
                class="avatar"
                :src="displayAvatar"
                mode="aspectFill"
              ></image>
            </view>

            <text class="arrow-icon">›</text>
          </view>
        </view>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 昵称 -->
        <view class="info-item" @tap="showNicknameDialog">
          <text class="item-label">昵称</text>
          <view class="item-right">
            <text class="item-value">{{ userInfo.nickname || '未设置' }}</text>
            <text class="arrow-icon">›</text>
          </view>
        </view>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 个性签名 -->
        <view class="info-item" @tap="showSignatureDialog">
          <text class="item-label">个性签名</text>
          <view class="item-right">
            <text class="item-value">{{ userInfo.signature || '未设置' }}</text>
            <text class="arrow-icon">›</text>
          </view>
        </view>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 支付宝账号 -->
        <view class="info-item" @tap="showAlipayDialog">
          <text class="item-label">支付宝账号</text>
          <view class="item-right">
            <text class="item-value">{{ formatAlipayAccount(userInfo.alipayAccount) }}</text>
            <text class="arrow-icon">›</text>
          </view>
        </view>
      </view>
      
      <!-- 保存按钮 -->
      <button 
        class="save-button" 
        @tap="handleSave"
      >
        保存
      </button>
    </view>
    
    <!-- 头像选择弹窗 -->
    <uni-popup ref="avatarPopup" type="bottom" :mask-click="true" :safe-area="false">
      <view class="avatar-popup">
        <view class="popup-item" @tap="selectFromAlbum">
          <text class="popup-text">从相册选择</text>
        </view>
        <view class="popup-divider"></view>
        <view class="popup-item" @tap="takePhoto">
          <text class="popup-text">拍照</text>
        </view>
        <view class="popup-divider"></view>
        <view class="popup-item" @tap="useWechatAvatar">
          <text class="popup-text">用微信头像</text>
          <view class="checkbox-icon">
            <text class="checkmark" v-if="useWechatAvatarFlag">✓</text>
          </view>
        </view>
        <view class="popup-divider"></view>
        <view class="popup-item cancel-item" @tap="closeAvatarPopup">
          <text class="popup-text cancel-text">取消</text>
        </view>
      </view>
    </uni-popup>
    
    <!-- 昵称输入弹窗 -->
    <uni-popup ref="nicknamePopup" type="bottom" :mask-click="true" :safe-area="false">
      <view class="input-popup">
        <view class="popup-header">
          <text class="popup-title">请输入昵称</text>
        </view>
        <view class="popup-content">
          <input 
            class="popup-input"
            v-model="tempNickname"
            placeholder="输入昵称"
            maxlength="20"
          />
        </view>
        <view class="popup-footer">
          <button class="confirm-button" @tap="confirmNickname">确定</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 个性签名输入弹窗 -->
    <uni-popup ref="signaturePopup" type="bottom" :mask-click="true" :safe-area="false">
      <view class="input-popup signature-popup">
        <view class="popup-header">
          <text class="popup-title">请输入个性签名</text>
        </view>
        <view class="popup-content">
          <textarea 
            class="popup-textarea"
            v-model="tempSignature"
            placeholder="输入个性签名"
            maxlength="50"
            auto-height
          />
        </view>
        <view class="popup-footer">
          <button class="confirm-button" @tap="confirmSignature">确定</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 支付宝账号输入弹窗 -->
    <uni-popup ref="alipayPopup" type="bottom" :mask-click="true" :safe-area="false">
      <view class="input-popup">
        <view class="popup-header">
          <text class="popup-title">请输入支付宝账号</text>
        </view>
        <view class="popup-content">
          <view class="alipay-input-container">
            <view class="alipay-icon">
			  <image class="alipay-logo" src="/static/svip8.png" mode=""></image>
            </view>
            <input 
              class="popup-input alipay-input"
              v-model="tempAlipayAccount"
              placeholder="输入支付宝账号"
              type="number"
              maxlength="11"
            />
          </view>
        </view>
        <view class="popup-footer">
          <button class="confirm-button" @tap="confirmAlipay">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 登录弹窗组件 -->
    <LoginModal
      ref="loginModalRef"
      @close="onLoginModalClose"
      @skip="onLoginSkip"
      @login="onLoginSuccess"
    />
  </view>
  </NavBar>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { isWeixinMiniProgram } from '../../utils/platform.js'
import { isLoggedIn, getCurrentUser, getToken, navigateToLogin, fetchUserInfo } from '../../utils/user.js'
import { uploadAvatar as ossUploadAvatar } from '../../utils/ossUpload.js'
import { USER_API } from '../../config/api.js'
import LoginModal from '@/components/LoginModal/LoginModal.vue'

// 平台判断
const isWeixinMP = ref(isWeixinMiniProgram())

// 响应式数据
const userInfo = ref({
  avatar: '',
  nickname: '',
  signature: '',
  alipayAccount: '',
  alipay: '' // 后端字段
})

const originalUserInfo = ref({ ...userInfo.value })

// 新增：用于保存上传后的头像地址
const uploadedAvatarUrl = ref('')

// 新增：用于保存临时选择的头像地址（用于界面显示）
const tempAvatarUrl = ref('')

// 登录状态
const isUserLoggedIn = ref(false)

// 临时数据
const tempNickname = ref('')
const tempSignature = ref('')
const tempAlipayAccount = ref('')
const useWechatAvatarFlag = ref(false)

// 弹窗引用
const avatarPopup = ref()
const nicknamePopup = ref()
const signaturePopup = ref()
const alipayPopup = ref()
const loginModalRef = ref()

// 计算属性
const hasChanges = computed(() => {
  // 检查基本信息是否有变化
  const basicInfoChanged = JSON.stringify(userInfo.value) !== JSON.stringify(originalUserInfo.value)

  // 检查是否有临时头像（表示用户选择了新头像）
  const hasNewAvatar = tempAvatarUrl.value !== '' || uploadedAvatarUrl.value !== ''

  return basicInfoChanged || hasNewAvatar
})

// 计算当前显示的头像（优先显示临时头像，然后是用户头像）
const displayAvatar = computed(() => {
  return tempAvatarUrl.value || userInfo.value.avatar || '/static/profile/avatar.jpg'
})

// 支付宝账号格式化显示
const formatAlipayAccount = (alipay: string) => {
  if (!alipay || alipay.trim() === '') {
    return '未绑定'
  }

  // 如果长度小于7位，直接返回原值
  if (alipay.length < 7) {
    return alipay
  }

  // 格式化为 145****263 格式（前3位 + 4个* + 后3位）
  const start = alipay.substring(0, 3)
  const end = alipay.substring(alipay.length - 3)
  return `${start}****${end}`
}

// 支付宝账号格式验证
const validateAlipayAccount = (alipay: string) => {
  if (!alipay || alipay.trim() === '') {
    return true // 空值允许通过
  }

  const account = alipay.trim()

  // 手机号正则：1开头，第二位为3-9，总共11位数字
  const phoneRegex = /^1[3-9]\d{9}$/

  // 邮箱正则：基本邮箱格式验证
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

  // 检查是否为有效的手机号或邮箱
  return phoneRegex.test(account) || emailRegex.test(account)
}

// 方法
const goBack = () => {
  if (hasChanges.value) {
    uni.showModal({
      title: '提示',
      content: '您有未保存的修改，确定要离开吗？',
      success: (res) => {
        if (res.confirm) {
          uni.navigateBack()
        }
      }
    })
  } else {
    uni.navigateBack()
  }
}

// 头像相关方法
const showAvatarOptions = () => {
  avatarPopup.value?.open()
}

const closeAvatarPopup = () => {
  avatarPopup.value?.close()
}

// 微信小程序头像选择回调（button组件的chooseavatar事件）
const onChooseAvatar = (e: any) => {
  console.log('=== 微信头像选择回调开始 ===')
  console.log('完整事件对象:', e)

  // 检查事件对象是否有效
  if (!e || !e.detail) {
    console.warn('事件对象无效')
    return
  }

  // 检查是否有错误信息
  if (e.detail.errMsg) {
    console.log('头像选择错误信息:', e.detail.errMsg)

    // 如果是用户取消操作，静默处理
    if (e.detail.errMsg.includes('cancel')) {
      console.log('用户取消了头像选择')
      return
    }

    // 如果是权限问题，提示用户
    if (e.detail.errMsg.includes('no permission')) {
      console.warn('头像选择权限不足:', e.detail.errMsg)
      uni.showToast({
        title: '请检查小程序权限设置',
        icon: 'none',
        duration: 2000
      })
      return
    }

    // 其他错误情况显示通用提示
    console.warn('头像选择失败:', e.detail.errMsg)
    uni.showToast({
      title: '头像选择失败，请重试',
      icon: 'none'
    })
    return
  }

  // 检查是否成功获取到头像
  if (e.detail.avatarUrl) {
    const { avatarUrl } = e.detail
    console.log('成功获取头像URL:', avatarUrl)

    if (avatarUrl && avatarUrl.trim() !== '') {
      console.log('开始处理头像上传')

      // 使用临时变量保存选择的头像，不直接修改userInfo
      tempAvatarUrl.value = avatarUrl

      // 检查URL格式并上传
      if (avatarUrl.startsWith('http') || avatarUrl.startsWith('wxfile://')) {
        console.log('头像URL格式验证通过，开始上传')
        convertToBase64AndUpload(avatarUrl)
      } else {
        console.warn('头像URL格式异常:', avatarUrl)
        uni.showToast({
          title: '头像格式异常',
          icon: 'error'
        })
        // 清空临时头像
        tempAvatarUrl.value = ''
      }
    } else {
      console.warn('获取到的头像URL为空')
      uni.showToast({
        title: '未获取到有效头像',
        icon: 'error'
      })
    }
  } else {
    // 没有avatarUrl，可能是用户取消了操作
    console.log('未获取到头像URL，可能是用户取消了操作')
  }

  console.log('=== 微信头像选择回调结束 ===')
}

// 使用新的OSS SDK上传文件
const convertToBase64AndUpload = async (filePath: string) => {
  console.log('=== 开始头像上传流程 ===')
  console.log('文件路径:', filePath)
  // 检查登录状态
  const loginStatus = isLoggedIn()
  if (!loginStatus) {
    // 判断是否为微信小程序
    if (isWeixinMiniProgram()) {
      // 微信小程序显示登录弹窗
      showLoginModal()
    } else {
      // 其他平台跳转到登录页面
      navigateToLogin('/pages/personal-info/personal-info')
    }
    return
  }
  try {
    uni.showLoading({
      title: '上传中...'
    })

    // 使用OSS PostObject直传
    console.log('开始使用OSS直传...')
    const uploadResult = await ossUploadAvatar(filePath)
    console.log('OSS直传成功:', uploadResult)

    if (uploadResult) {
      // 保存上传后的头像地址
      uploadedAvatarUrl.value = uploadResult

      uni.hideLoading()
      uni.showToast({
        title: '头像上传成功',
        icon: 'success'
      })
      console.log('头像上传流程完成')
    } else {
      throw new Error('上传结果为空')
    }

  } catch (error) {
    console.error('=== 头像上传失败 ===')
    console.error('错误详情:', error)
    console.error('错误消息:', error.message)

    // 上传失败时清空临时头像
    tempAvatarUrl.value = ''

    uni.hideLoading()
    uni.showToast({
      title: error.message || '上传失败',
      icon: 'error'
    })
  }

  console.log('=== 头像上传流程结束 ===')
}

// 非微信小程序头像更换
const changeAvatar = () => {
  showAvatarOptions()
}





// 上传头像到服务器（统一使用OSS上传）
const uploadAvatar = async (filePath: string) => {
  console.log('开始上传头像到服务器:', filePath)

  try {
    // 设置临时头像显示
    tempAvatarUrl.value = filePath

    // 使用OSS上传
    await convertToBase64AndUpload(filePath)
  } catch (error) {
    console.error('头像上传失败:', error)
    // 上传失败时清空临时头像
    tempAvatarUrl.value = ''
  }
}

const selectFromAlbum = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: (res) => {
      console.log('从相册选择图片成功:', res)
      uploadAvatar(res.tempFilePaths[0])
      closeAvatarPopup()
    },
    fail: (error) => {
      console.error('从相册选择图片失败:', error)
      uni.showToast({
        title: '选择图片失败',
        icon: 'error'
      })
    }
  })
}

const takePhoto = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['camera'],
    success: (res) => {
      console.log('拍照成功:', res)
      uploadAvatar(res.tempFilePaths[0])
      closeAvatarPopup()
    },
    fail: (error) => {
      console.error('拍照失败:', error)
      uni.showToast({
        title: '拍照失败',
        icon: 'error'
      })
    }
  })
}

const useWechatAvatar = () => {
  useWechatAvatarFlag.value = !useWechatAvatarFlag.value
  if (useWechatAvatarFlag.value) {
    // 这里可以调用微信API获取用户头像
    uni.getUserInfo({
      success: (res) => {
        console.log('获取微信头像成功:', res)
        uploadAvatar(res.userInfo.avatarUrl)
        closeAvatarPopup()
      },
      fail: (error) => {
        console.error('获取微信头像失败:', error)
        uni.showToast({
          title: '获取微信头像失败',
          icon: 'error'
        })
        useWechatAvatarFlag.value = false
      }
    })
  }
}

// 昵称相关方法
const showNicknameDialog = () => {
  tempNickname.value = userInfo.value.nickname
  nicknamePopup.value?.open()
}

const confirmNickname = () => {
  if (tempNickname.value.trim()) {
    userInfo.value.nickname = tempNickname.value.trim()
  }
  nicknamePopup.value?.close()
}

// 个性签名相关方法
const showSignatureDialog = () => {
  tempSignature.value = userInfo.value.signature
  signaturePopup.value?.open()
}

const confirmSignature = () => {
  userInfo.value.signature = tempSignature.value.trim()
  signaturePopup.value?.close()
}

// 支付宝账号相关方法
const showAlipayDialog = () => {
  // 如果支付宝账号为空或未绑定，设置为空字符串
  if (!userInfo.value.alipay || userInfo.value.alipay.trim() === '' || userInfo.value.alipayAccount === '未绑定') {
    tempAlipayAccount.value = ''
  } else {
    // 如果有值，使用原始值（alipay字段）
    tempAlipayAccount.value = userInfo.value.alipay
  }
  alipayPopup.value?.open()
}

const confirmAlipay = () => {
  const account = tempAlipayAccount.value.trim()
  if (account) {
    // 验证支付宝账号格式
    if (!validateAlipayAccount(account)) {
      uni.showToast({
        title: '支付宝账号格式不正确',
        icon: 'error'
      })
      return
    }

    // 保存原始值到alipay字段
    userInfo.value.alipay = account
    // 更新显示值到alipayAccount字段
    userInfo.value.alipayAccount = account
  } else {
    // 如果为空，清空两个字段
    userInfo.value.alipay = ''
    userInfo.value.alipayAccount = ''
  }
  alipayPopup.value?.close()
}

// 保存方法
const handleSave = async () => {
  // 检查登录状态
  const loginStatus = isLoggedIn()
  if (!loginStatus) {
    // 判断是否为微信小程序
    if (isWeixinMiniProgram()) {
      // 微信小程序显示登录弹窗
      showLoginModal()
    } else {
      // 其他平台跳转到登录页面
      navigateToLogin('/pages/personal-info/personal-info')
    }
    return
  }

  if (!hasChanges.value) {
    uni.showToast({
      title: '没有修改内容',
      icon: 'none'
    })
    return
  }

  // 验证支付宝账号格式
  if (userInfo.value.alipay && !validateAlipayAccount(userInfo.value.alipay)) {
    uni.showToast({
      title: '支付宝账号格式不正确',
      icon: 'error'
    })
    return
  }

  try {
    uni.showLoading({
      title: '保存中...'
    })

    // 准备保存的数据
    const saveData = {
      nickname: userInfo.value.nickname,
      signature: userInfo.value.signature,
      alipay: userInfo.value.alipay || ''
    }

    // 判断头像是否为本地默认头像，如果不是才传avatar字段
    const currentAvatar = uploadedAvatarUrl.value || userInfo.value.avatar
    if (currentAvatar && currentAvatar !== '/static/profile/avatar.jpg') {
      saveData.avatar = currentAvatar
    }

    console.log('保存用户信息:', saveData)

    // 获取用户token
    const token = getToken()
    if (!token) {
      throw new Error('未找到用户token，请重新登录')
    }

    // 调用保存用户信息API
    const response = await uni.request({
      url: USER_API.USER_PROFILE,
      method: 'PUT',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      data: saveData
    })

    console.log('API响应:', response)

    if (response.statusCode === 200 && response.data.code === 200) {
      uni.hideLoading()
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })

      // 保存成功后刷新用户信息
      try {
        await fetchUserInfo()
        console.log('用户信息刷新成功')
      } catch (error) {
        console.error('刷新用户信息失败:', error)
      }

      // 保存成功后跳转到上一个页面
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    } else {
      throw new Error(response.data?.message || '保存失败')
    }

  } catch (error) {
    console.error('保存用户信息失败:', error)
    uni.hideLoading()
    uni.showToast({
      title: error.message || '保存失败',
      icon: 'error'
    })
  }
}

// 登录弹窗相关方法
const showLoginModal = () => {
  loginModalRef.value?.open()
}

const onLoginModalClose = () => {
  console.log('登录弹窗关闭')
}

const onLoginSkip = () => {
  uni.showToast({
    title: '暂不登录',
    icon: 'none',
    duration: 2000
  })
}

const onLoginSuccess = () => {
  // 弹框处理了登录逻辑 这里只处理登录完成逻辑
  console.log('登录成功')

  // 重新加载用户信息
  loadUserInfo()

  // 提示用户可以继续保存
  uni.showToast({
    title: '登录成功，请重新保存',
    icon: 'success'
  })
}

// 页面加载时初始化
onMounted(() => {
  console.log('个人信息页面加载')
  console.log('当前平台是否为微信小程序:', isWeixinMP.value)
  loadUserInfo()
})

// 页面显示时重新检查登录状态
onShow(() => {
  console.log('个人信息页面显示，重新检查登录状态')
  // 添加延迟确保数据已经保存
  setTimeout(() => {
    loadUserInfo()
  }, 100)
})

const loadUserInfo = () => {
  console.log('=== 开始加载用户信息 ===')

  // 清空之前上传的头像地址和临时头像，确保从干净状态开始
  uploadedAvatarUrl.value = ''
  tempAvatarUrl.value = ''

  // 检查登录状态
  const loginStatus = isLoggedIn()
  isUserLoggedIn.value = loginStatus

  console.log('登录状态:', loginStatus)

  if (loginStatus) {
    // 已登录，获取用户数据
    const currentUser = getCurrentUser()
    console.log('当前用户数据:', currentUser)

    if (currentUser) {
      // 处理头像显示逻辑
      let avatarUrl = currentUser.avatar || '/static/profile/avatar.jpg'
      if (currentUser.avatar === 'https://devoss.igmdns.com/avatar/avatar.jpg') {
        avatarUrl = '/static/profile/avatar.jpg'
      }

      userInfo.value = {
        avatar: avatarUrl,
        nickname: currentUser.nickname || '未设置',
        signature: currentUser.signature || '未设置',
        alipayAccount: currentUser.alipay ? currentUser.alipay : '未绑定',
        alipay: currentUser.alipay || ''
      }

      console.log('已登录用户信息:', userInfo.value)
    } else {
      console.warn('获取用户数据失败，使用默认值')
      setDefaultUserInfo()
    }
  } else {
    // 未登录，显示默认信息
    console.log('未登录，显示默认信息')
    setDefaultUserInfo()
  }

  // 保存原始信息用于比较变化
  originalUserInfo.value = { ...userInfo.value }
}

// 设置默认用户信息
const setDefaultUserInfo = () => {
  userInfo.value = {
    avatar: '/static/profile/avatar.jpg',
    nickname: '未设置',
    signature: '未设置',
    alipayAccount: '未绑定',
    alipay: ''
  }
}
</script>

<style scoped>
.personal-info-container {
  min-height: 100vh;
background: linear-gradient( 180deg, #C2DDFF 0%, #FFFFFF 100%);
border-radius: 0rpx 0rpx 0rpx 0rpx;
  position: relative;
  padding-top: 160rpx;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 10rpx;
  background: transparent;
}

.status-time {
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-icon {
  font-size: 24rpx;
  color: #000;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  background: rgba(255, 255, 255, 0.3);
}

.back-icon {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nav-placeholder {
  width: 60rpx;
  height: 60rpx;
  background: white;
  border-radius: 8rpx;
}

/* 主内容区域 */
.main-content {
  padding: 30rpx 20rpx;
}

/* 个人信息卡片 */
.info-card {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 40rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  transition: background-color 0.3s ease;
}

.info-item:active {
  background-color: #F5F5F5;
}

.item-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.item-value {
  font-size: 28rpx;
  color: #666;
  max-width: 400rpx;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow-icon {
  font-size: 24rpx;
  color: #999;
  font-weight: bold;
}

/* 头像相关样式 */
.avatar-container {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background: #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 微信小程序头像按钮样式 */
.avatar-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background: #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
}

.avatar-wrapper::after {
  border: none;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.avatar-edit-icon {
  position: absolute;
  bottom: -2rpx;
  right: -2rpx;
  width: 24rpx;
  height: 24rpx;
  background: #007AFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid white;
}

.edit-text {
  font-size: 12rpx;
  color: white;
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FFB6C1 0%, #FFA0B4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-text {
  font-size: 24rpx;
  color: white;
  font-weight: 500;
}

/* 分割线 */
.divider {
  height: 1rpx;
  background: #F0F0F0;
  margin: 0 30rpx;
}

/* 保存按钮 */
.save-button {
  width: 90%;
  height: 88rpx;
  color: white;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 16rpx rgba(156, 39, 176, 0.3);
  background-color: #565FFD;
  position: absolute;
  bottom: 320rpx;
  left: 50%;
  transform: translate(-50%)!important;
}

.save-button:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.4);
}


/* 头像选择弹窗 */
.avatar-popup {
  background: white;
  border-radius: 20rpx 20rpx 0 0;
  padding: 20rpx 0;
}

.popup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  transition: background-color 0.3s ease;
}

.popup-item:active {
  background-color: #F5F5F5;
}

.popup-item.cancel-item {
  margin-top: 10rpx;
  border-top: 1rpx solid #F0F0F0;
}

.popup-text {
  font-size: 32rpx;
  color: #333;
}

.popup-text.cancel-text {
  color: #FF4D4F;
}

.popup-divider {
  height: 1rpx;
  background: #F0F0F0;
  margin: 0 40rpx;
}

.checkbox-icon {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #D9D9D9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark {
  font-size: 20rpx;
  color: #2196F3;
  font-weight: bold;
}

/* 输入弹窗 */
.input-popup {
  background: white;
  border-radius: 16rpx;
  width: 100%;
  overflow: hidden;
}

.signature-popup {
  width: 100%;
}

.popup-header {
  padding: 40rpx 30rpx 30rpx 20rpx;
  text-align: center;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.popup-content {
	width: 90%;
  padding: 30rpx;
  margin: 0 auto;
}

.popup-input {
  width: 90%;
  height: 106rpx;
  border: 2rpx solid #E0E0E0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  margin: 0 auto;
  
}

.popup-input:focus {
  border-color: #2196F3;
  background: white;
}

.popup-textarea {
  width: 90%;
  border: 2rpx solid #E0E0E0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin: 0 auto;
  height: 244rpx!important;
}

.popup-textarea:focus {
  border-color: #2196F3;
  background: white;
}

.alipay-input-container {
  display: flex;
  align-items: center;
  border: 2rpx solid #E0E0E0;
  border-radius: 12rpx;
  overflow: hidden;
}

.alipay-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10rpx;
  border-radius: 8rpx;
}

.alipay-logo {
  
  width: 48rpx;
  height: 48rpx;
}

.alipay-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.popup-footer {
  padding: 20rpx 30rpx 40rpx;
  border-top: 1rpx solid #F0F0F0;
  border-radius: 20rpx;
}

.confirm-button {
  width: 100%;
  height: 80rpx;
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 600;
  transition: all 0.3s ease;
  background-color: #565FFD;
}

.confirm-button:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .info-item {
    padding: 24rpx;
  }
  
  .item-label {
    font-size: 30rpx;
  }
  
  .item-value {
    font-size: 26rpx;
  }
  
  .popup-item {
    padding: 24rpx 30rpx;
  }
  
  .popup-text {
    font-size: 30rpx;
  }
}

/* 安全区域适配 */
@supports (padding: max(0px)) {
  .personal-info-container {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}
</style>

